<!-- 
  @name: 余额详情
  @date: 2020.3.2
 -->
<template>
	<view class="content">
		<view style="height: 80rpx;" v-if="operaId"></view>
		<view class="fixed_top">
			<!-- 顶部账户信息 -->
			<view class="top-info">
				<view class="name" v-if="operaId">{{ operName }}</view>
				<view class="info-item u-f-ac">
					<image src="../static/my/income@2x.png" mode="aspectFill"></image>
					<view>总消费(元)</view>
					<view>
						￥
						<text>{{ totalConsume || 0 }}</text>
					</view>
				</view>
				<view class="info-item u-f-ac">
					<image src="../static/my/spending@2x.png" mode="aspectFill"></image>
					<view>总充值(元)</view>
					<view>
						￥
						<text>{{ totalRecharge || 0 }}</text>
					</view>
				</view>
				<view class="table-download" @tap="showDownPopup"><view>报表下载</view></view>
			</view>

			<!-- 顶部菜单 -->
			<view class="top-menu">
				<!-- 选项卡 -->
				<tab-card
					tab-width="350"
					line-width="100%"
					:tab-list="tabList"
					@click-item="onClickItem"
				></tab-card>
				<!-- 条件筛选区域 -->
				<view class="term-view" @tap="termOpenClose">
					<view class="text">筛选</view>
					<view class="icon">
						<view class="num">{{ teamChooseList.length + cardChooseList.length }}</view>
						<view class="icon-2"></view>
					</view>
				</view>
				<!-- 日期筛选区域 -->
				<view class="date-view" @tap="dateOpenClose">
					<view class="way-1" v-show="dateType === 0">
						<text class="mon">{{ month }}</text>
						<text class="date">月{{ year }}年</text>
					</view>
					<view class="way-2" v-show="dateType === 1">
						<view>{{ startTime }}</view>
						<view>{{ endTime }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 日期筛选遮罩层 -->
		<date-select
			:show="showPopup"
			:start="startTime"
			:end="endTime"
			:type="dateType"
			:top="operaId == '' ? '340' : '420'"
			@submit="onSubmit"
			@cancle="onCancle"
		></date-select>

		<!-- 条件筛选遮罩层 -->
		<view class="_popup term" v-show="isTermSelect" @tap="termOpenClose"></view>
		<view
			class="popup-view"
			:style="{ top: operaId ? '340rpx' : '260rpx' }"
			v-show="isTermSelect"
		>
			<!-- 选择按钮 -->
			<view class="check">
				<view class="btn" :class="termType === 1 ? 'sl' : ''" @tap="changeType(1)">
					团队成员
				</view>
				<view class="btn" :class="termType === 2 ? 'sl' : ''" @tap="changeType(2)">
					储值卡
				</view>
			</view>
			<!-- 团队成员 -->
			<scroll-view
				class="tscroll"
				scroll-y
				scroll-top="0"
				v-show="termType === 1"
				@scrolltolower="getTeamList"
			>
				<view class="scroll_blank"></view>
				<view v-if="teamListTmp.length > 0">
					<view
						class="btn"
						v-for="(item, index) in teamListTmp"
						:key="item.userId"
						:class="item.isSelect ? 'sl' : ''"
						@tap="chooseTeam(item, index)"
					>
						<text class="text_over">{{ item.userName }}</text>
						<br />
						{{ item.userPhone }}
					</view>
				</view>
				<view class="nodata" v-if="teamListTmp.length === 0">暂无团队成员</view>
			</scroll-view>
			<!-- 储值卡 -->
			<scroll-view
				class="tscroll"
				scroll-y
				scroll-top="0"
				v-show="termType === 2"
				@scrolltolower="getCardList"
			>
				<view class="scroll_blank"></view>
				<view v-if="cardListTmp.length > 0">
					<view
						class="btn"
						v-for="(item, index) in cardListTmp"
						:key="item.cardId"
						:class="item.isSelect ? 'sl' : ''"
						@tap="chooseCard(item, index)"
					>
						<text class="text_over">{{ item.cardDesc }}</text>
						<br />
						{{ item.cardNo }}
					</view>
				</view>
				<view class="nodata" v-if="cardListTmp.length === 0">暂无储值卡</view>
			</scroll-view>
			<!-- 完成操作 -->
			<view class="handle">
				<view class="btn" @tap="termReset">重置</view>
				<view class="btn.b2" @tap="termSubmit">
					<text>完成</text>
					<text class="num">
						{{ teamChooseListTmp.length + cardChooseListTmp.length }}
					</text>
				</view>
			</view>
		</view>

		<!-- 具体内容 -->
		<view class="scrview" v-if="lists.length > 0">
			<!-- 统计区域 -->
			<!-- <view class="total">
				<view class="item" v-if="tabIndex === 0 || tabIndex === 2">
					<view class="icon1"></view>
					<text class="text">总消费</text>
					<text class="icon3">￥</text>
					<text class="num">{{totalConsume}}</text>
				</view>
				<view class="item" v-if="tabIndex === 0 || tabIndex === 1">
					<view class="icon2"></view>
					<text class="text">总充值</text>
					<text class="icon3">￥</text>
					<text class="num">{{totalRecharge}}</text>
				</view>
			</view> -->
			<!-- 列表 -->
			<view class="bill-list">
				<view class="card" v-for="(item, index) in lists" :key="item.billId">
					<view
						class="logo"
						:class="(item.billType === 1 || item.billType === 2) ? 'l1' : 'l2'"
					>
						<text v-if="item.billType === 1">消</text>
						<text v-if="item.billType === 0">充</text>
						<text v-if="item.billType === 2">分</text>
						<text v-if="item.billType === 3">退</text>
					</view>
					<view class="msg">
						<view>
							{{ item.userName }}
							<text v-show="item.billType === 1" style="margin-left: 20rpx;">
								{{ item.userPhone || '' }}
							</text>
						</view>
						<view class="m1">{{ item.billDayTime }} {{ item.billTime }}</view>
					</view>
					<view class="num" :class="(item.billType === 1 || item.billType===2) ? 'n1' : 'n2'">
						<text v-text="(item.billType === 1 || item.billType===2) ? '-' : '+'"></text>
						{{ item.billMoney }}
					</view>
				</view>
			</view>
			<!-- 底部加载提示 -->
			<btm-load></btm-load>
		</view>

		<!-- 缺省 -->
		<view class="no_lists" v-if="lists.length === 0">
			<image src="../static/wxImage/bg-noRecord.png" mode="aspectFill"></image>
			<text class="tip">暂无信息</text>
		</view>

		<!-- 登录提示 -->
		<sign-in @submit="reLogin"></sign-in>

		<!-- 下载提示提示 -->
		<download-table ref="downloadTable" @downTable="downloadTable"></download-table>
	</view>
</template>

<script>
import downloadTable from '@/components/popup/download-table.vue';
export default {
	components: { downloadTable },
	data() {
		return {
			operaId: '', //运营商id
			operName: '', // 运营商名称
			isOwner: 0, //用户身份
			tabList: ['全部', '充值', '消费'], //选项卡
			tabIndex: 0, //选项卡初始面板
			lists: [], //帐单列表
			list1: [], //全部列表
			page1: 1, //全部列表页码
			list2: [], //充值列表
			page2: 1, //充值列表页码
			list3: [], //消费列表
			page3: 1, //消费列表页码
			totalConsume: '', //总消费
			totalRecharge: '', //总充值
			//日期筛选
			showPopup: false, //显示日期筛选
			dateType: 0, //方式，0-按月筛选，1-按日筛选
			year: 2020, //按月筛选-年份
			month: 1, //按月筛选-月份
			startTime: '', //开始日期-提交
			endTime: '', //结束日期-提交
			//条件筛选区
			termType: 1, //条件种类，1-团队，2-储值卡
			isTermSelect: false, //是否进行条件筛选
			teamChooseList: [], //已选择的团队成员
			teamChooseListTmp: [], //已选择的团队成员-缓存
			userIds: '', //选择的成员id
			teamList: [], //团队成员列表
			teamListTmp: [], //团队成员列表-缓存
			teamPage: 1, //团队页码
			cardChooseList: [], //已选择的储值卡
			cardChooseListTmp: [], //已选择的储值卡-缓存
			cardNo: '', //已选择的储值卡id
			cardList: [], //储值卡列表
			cardListTmp: [], //储值卡列表-缓存
			cardPage: 1, //卡页码
			downloadUrl: '' // 下载流水excel链接
		};
	},
	watch: {
		list1(newVal, oldVal) {
			if (this.tabIndex === 0 && newVal !== this.lists) {
				this.lists = this.list1;
			}
		},
		list2(newVal, oldVal) {
			if (this.tabIndex === 1 && newVal !== this.lists) {
				this.lists = this.list2;
			}
		},
		list3(newVal, oldVal) {
			if (this.tabIndex === 2 && newVal !== this.lists) {
				this.lists = this.list3;
			}
		}
	},
	onLoad(e) {
		console.log(e);
		this.operaId = e.operaId || '';
		this.operName = e.operName || '';
		this.isOwner = this.$store.state.userinfo.isOwner;
		this.getDate();
		this.getList(1); //初次获取全部
		this.getTeamList(); //获取团队成员
		this.getCardList(); //获取储值卡
	},
	onReachBottom() {
		this.$store.commit('btmLoad', true);
		this.getList(this.tabIndex + 1);
	},
	onPullDownRefresh() {
		this.reLogin();
	},
	methods: {
		showDownPopup() {
			// if (!this.lists.length) return this.$showToast('当前时间段没有流水记录！');
			uni.showModal({
				title: '提示',
				content: `您确认下载 ${this.startTime} 和 ${this.endTime} 之间的流水记录吗？`,
				success: res => {
					if (res.confirm) {
						this.$refs.downloadTable.open();
					}
				}
			});
		},
		// 下载记录报表
		downloadTable(email) {
			uni.showLoading();
			console.log(this.startTime, this.endTime, email);
			this.$http({
				url: this.$api.userUrl + 'getrecordlistbyuser',
				data: {
					startTime: this.startTime,
					endTime: this.endTime,
					emailAddress: email
				}
			}).then(res => {
				uni.hideLoading();
				this.$showToast('发送成功！');
			});
		},
		//重新登录
		reLogin() {
			this.isTermSelect = false;
			this.showPopup = false;
			this.hasSelect();
		},
		//选项卡
		onClickItem(index) {
			if (this.tabIndex !== index) {
				this.tabIndex = index;
				switch (index) {
					case 0:
						this.lists = this.list1;
						break;
					case 1:
						this.lists = this.list2;
						break;
					case 2:
						this.lists = this.list3;
						break;
				}
				if (
					(index === 0 && this.page1 === 1) ||
					(index === 1 && this.page2 === 1) ||
					(index === 2 && this.page3 === 1)
				) {
					this.getList(this.tabIndex + 1);
				}
				uni.pageScrollTo({ scrollTop: 0, duration: 200 });
			}
		},
		//获取日期
		getDate() {
			this.endTime = this.$getToday();
			let arr = this.endTime.split('-');
			this.startTime = arr[0] + '-' + arr[1] + '-01';

			this.year = arr[0];
			this.month = arr[1];
		},
		//筛选过后重新获取列表
		hasSelect() {
			this.list1 = [];
			this.page1 = 1;
			this.list2 = [];
			this.page2 = 1;
			this.list3 = [];
			this.page3 = 1;
			this.getList(this.tabIndex + 1);
		},
		//提交条件筛选
		termSubmit() {
			this.isTermSelect = false;
			if (this.termType === 1) {
				this.teamList = [];
				this.teamList = JSON.parse(JSON.stringify(this.teamListTmp));
				this.teamChooseList = [];
				this.teamChooseList = JSON.parse(JSON.stringify(this.teamChooseListTmp));
				this.userIds = this.$arrToStr(this.teamChooseList);
				//取消储值卡的选择状态
				this.cardNo = '';
				this.cardChooseList = [];
				this.cardList = JSON.parse(JSON.stringify(this.cardListTmp));
			} else {
				this.cardList = [];
				this.cardList = JSON.parse(JSON.stringify(this.cardListTmp));
				this.cardChooseList = [];
				this.cardChooseList = JSON.parse(JSON.stringify(this.cardChooseListTmp));
				this.cardNo = this.$arrToStr(this.cardChooseList);
				//取消团队的选择状态
				this.userIds = '';
				this.teamChooseList = [];
				this.teamList = JSON.parse(JSON.stringify(this.teamListTmp));
			}
			this.hasSelect();
		},
		//重置条件筛选
		termReset() {
			this.cardChooseListTmp = [];
			this.teamChooseListTmp = [];
			this.teamListTmp.forEach(item => (item.isSelect = false));
			this.cardListTmp.forEach(item => (item.isSelect = false));
		},
		//切换条件筛选种类
		changeType(code) {
			if (this.termType !== code) {
				this.termType = code;
				if (code === 1) {
					//如果选择队员筛选，清空储值卡选择缓存
					this.cardChooseListTmp = [];
					this.cardListTmp.forEach(item => (item.isSelect = false));
				} else {
					this.teamChooseListTmp = [];
					this.teamListTmp.forEach(item => (item.isSelect = false));
				}
			}
		},
		//打开/关闭条件筛选区域
		termOpenClose() {
			this.showPopup = false;
			this.isTermSelect = !this.isTermSelect;
			if (this.isTermSelect) {
				this.cardListTmp = [];
				this.cardListTmp = JSON.parse(JSON.stringify(this.cardList));
				this.cardChooseListTmp = [];
				this.cardChooseListTmp = JSON.parse(JSON.stringify(this.cardChooseList));
				this.teamListTmp = [];
				this.teamListTmp = JSON.parse(JSON.stringify(this.teamList));
				this.teamChooseListTmp = [];
				this.teamChooseListTmp = JSON.parse(JSON.stringify(this.teamChooseList));
			}
		},
		//选择团队成员
		chooseTeam(item, index) {
			if (item.isSelect) {
				//取消选中
				let ix = this.teamChooseListTmp.findIndex(it => it === item.userId);
				this.teamChooseListTmp.splice(ix, 1);
				this.teamListTmp[index].isSelect = false;
			} else {
				this.teamChooseListTmp.push(item.userId);
				this.teamListTmp[index].isSelect = true;
			}
		},
		//选择储值卡
		chooseCard(item, index) {
			if (item.isSelect) {
				//取消选中
				let ix = this.cardChooseListTmp.findIndex(it => it === item.cardNo);
				this.cardChooseListTmp.splice(ix, 1);
				this.cardListTmp[index].isSelect = false;
			} else {
				this.cardChooseListTmp.push(item.cardNo);
				this.cardListTmp[index].isSelect = true;
			}
		},
		//打开/关闭日期筛选弹窗
		dateOpenClose() {
			this.isTermSelect = false;
			this.showPopup = !this.showPopup;
		},
		//确认日期筛选
		onSubmit(start, end, type) {
			this.showPopup = false;
			this.dateType = type;
			this.startTime = start;
			this.endTime = end;
			if (type === 0) {
				let arr = this.startTime.split('-');
				this.year = arr[0];
				this.month = parseInt(arr[1]);
			}
			this.hasSelect();
		},
		//取消日期筛选
		onCancle(bool) {
			this.showPopup = bool;
		},
		//获取团队列表
		getTeamList() {
			if (this.isOwner !== 2) {
				return;
			}
			this.$http({
				url: this.$api.userUrl + 'getuserteampage',
				data: {
					action: 0,
					page: this.teamPage,
					rows: this.$tmp.ROWS_RET
				}
			}).then(res => {
				let arr = res;
				if (arr && arr.length > 0) {
					arr.forEach(item => (item.isSelect = false));
					this.teamList = this.teamList.concat(arr);
					this.teamListTmp = this.teamListTmp.concat(arr);
					this.teamPage += 1;
				}
			});
		},
		//获取储值卡
		getCardList() {
			this.$http({
				url: this.$api.userUrl + 'getfillusercardpagebyuser',
				data: {
					operaId: this.operaId,
					page: this.cardPage,
					rows: this.$tmp.ROWS_RET
				}
			}).then(res => {
				let arr = res;
				if (arr && arr.length > 0) {
					arr.forEach(item => (item.isSelect = false));
					this.cardList = this.cardList.concat(arr);
					this.cardListTmp = this.cardListTmp.concat(arr);
					this.cardPage += 1;
				}
			});
		},
		//根据账单类型获取列表
		getList(billType) {
			let page = 1;
			switch (billType) {
				case 1:
					page = this.page1;
					break;
				case 2:
					page = this.page2;
					break;
				case 3:
					page = this.page3;
					break;
			}
			this.$http({
				url: this.$api.userUrl + 'getuserbillpage',
				data: {
					operaId: this.operaId,
					userIds: this.userIds,
					cardNo: this.cardNo,
					billType: billType,
					startTime: this.startTime,
					endTime: this.endTime,
					page: page,
					rows: this.$tmp.ROWS_RET
				},
				loading: page > 1 ? 0 : ''
			}).then(res => {
				this.totalConsume = res.totalConsume;
				this.totalRecharge = res.totalRecharge;
				let arr = res.lstBills;
				if (arr && arr.length > 0) {
					switch (billType) {
						case 1:
							this.list1 = this.list1.concat(arr);
							this.page1 += 1;
							break;
						case 2:
							this.list2 = this.list2.concat(arr);
							this.page2 += 1;
							break;
						case 3:
							this.list3 = this.list3.concat(arr);
							this.page3 += 1;
							break;
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
/* 顶部菜单 */
page {
	min-height: 100vh;
}
.fixed_top {
	// border-bottom: 1rpx solid $border-radius-bm;
	z-index: 99;
}

.top-info {
	padding: 60rpx 40rpx 20rpx 40rpx;
	border-bottom: 20rpx solid #f5f5f9;
	position: relative;

	.name {
		font-size: 36rpx;
		margin-bottom: 40rpx;
		font-weight: 600;
	}
	.info-item {
		font-size: 30rpx;
		color: #666666;

		image {
			width: 48rpx;
			height: 35rpx;
			margin: 22rpx;
		}
		> view:last-child {
			color: #343434;
			margin-left: 34rpx;
		}
	}
	.table-download {
		position: absolute;
		right: 10rpx;
		top: 50%;
		display: flex;
		justify-content: flex-end;
		background-color: #ffffff;
		padding: 0 30rpx 20rpx 30rpx;
		> view {
			background-color: #e4f9f2;
			color: #0dc887;
			padding: 10rpx 16rpx;
			border-radius: 8rpx;
		}
	}
}
.top-menu {
	width: 750rpx;
	height: 110rpx;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	background-color: $color-white;
	border-bottom: 1px solid #eee;

	.term-view {
		margin-left: 60rpx;
		padding-bottom: 25rpx;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		.icon {
			margin-left: 6rpx;
			.num {
				height: 28rpx;
				line-height: 27rpx;
				padding: 0 8rpx;
				font-size: 24rpx;
				color: $color-white;
				font-family: $font-family-num;
				background-color: $color-primary;
				border-radius: $border-radius-bm;
			}
			.icon-2 {
				width: 23rpx;
				height: 23rpx;
				margin-top: 10rpx;
				margin-bottom: 7rpx;
				background-image: url('http://img.etubang.com/group1/M00/00/40/rBCky14XzgWAVRMAAAADGlVHMWM008.png');
			}
		}
	}
	.date-view {
		flex: 1;
		padding-right: 30rpx;
		text-align: end;
		.way-1 {
			padding-bottom: 14rpx;
			font-family: $font-family-num;
			.mon {
				font-size: 50rpx;
			}
			.date {
				margin-left: 2rpx;
				font-size: 24rpx;
			}
		}
		.way-2 {
			padding-bottom: 14rpx;
			font-family: $font-family-num;

			view {
				font-size: 30rpx;
			}
		}
	}
}

/* 统计区域 */
.scrview {
	width: 750rpx;
	height: auto;
	margin-top: 359rpx;
}
.total {
	width: 750rpx;
	padding: 35rpx 30rpx;
	padding-top: 0;
	background-color: $color-white;
	.item {
		width: 100%;
		padding-top: 35rpx;
		color: $color-grey-dark;
		display: flex;
		flex-direction: row;
		align-items: center;
		.icon1 {
			width: 48rpx;
			height: 35rpx;
			background-image: url('http://img.etubang.com/group1/M00/00/40/rBCky14dJg2ACZ1uAAAFEjywe38927.png');
		}
		.icon2 {
			width: 42rpx;
			height: 40rpx;
			background-image: url('http://img.etubang.com/group1/M00/00/40/rBCky14dJmSAfEchAAAHbMhBLTo594.png');
		}
		.text {
			flex: 1;
			padding-left: 20rpx;
			font-size: 30rpx;
		}
		.icon3 {
			font-size: 30rpx;
		}
		.num {
			font-size: 40rpx;
			font-family: $font-family-num;
			margin-left: 3rpx;
		}
	}
}

/* 账单列表 */
.bill-list {
	width: 750rpx;
	background-color: $color-white;
	.card {
		width: 690rpx;
		margin: 0 30rpx;
		padding: 35rpx 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 1rpx solid $color-list;
		.logo {
			width: 80rpx;
			height: 80rpx;
			line-height: 79rpx;
			text-align: center;
			font-size: 40rpx;
			color: $color-white;
			border-radius: $border-radius-circle;
		}
		.logo.l1 {
			background-color: $color-primary;
		}
		.logo.l2 {
			background-color: #FF9900;
		}
		.msg {
			flex: 1;
			margin-left: 30rpx;

			.m1 {
				margin-top: 20rpx;
				font-size: 24rpx;
				color: $color-grey-dark;
			}
		}
		.num {
			font-size: 44rpx;
			font-family: $font-family-num;
		}
		.num.n1 {
			color: #12D4A0;
		}
		.num.n2 {
			color: #FF9900;
		}
	}
}

/* 条件筛选遮罩层 */
._popup.term,
.popup-view {
	// top: 110rpx;
}
.popup-view {
	position: fixed;
	z-index: 99;
	width: 750rpx;
	background-color: $color-white;
	.check {
		width: 100%;
		padding: 50rpx 28rpx;
		padding-bottom: 30rpx;
		display: flex;
		flex-direction: row;
		.btn {
			width: 196rpx;
			height: 67rpx;
			line-height: 66rpx;
			text-align: center;
			margin-right: 57rpx;
			font-size: 30rpx;
			color: $color-grey;
			background-color: $color-bg;
			border-radius: $border-radius-bm;
		}
		.btn.sl {
			color: $color-primary;
			background-color: $color-bg-primary;
		}
	}
	.tscroll {
		width: 100%;
		height: auto;
		max-height: 400rpx;
		padding-left: 2rpx;
		overflow: auto;
		.btn {
			display: inline-block;
			width: 194rpx;
			height: 81rpx;
			margin: 20rpx 28rpx;
			padding-top: 12rpx;
			padding-left: 20rpx;
			color: $color-grey;
			font-size: 24rpx;
			background-color: $color-bg;
			border-radius: $border-radius-bm;
		}
		.btn.sl {
			color: $color-text-primary;
			background-color: $color-bg-primary;
		}
	}
	.nodata {
		width: 100%;
		padding: 30rpx;
		color: $color-grey-dark;
	}
	.handle {
		margin-top: 40rpx;
		display: flex;
		flex-direction: row;
		border-top: 1rpx solid $color-list;
		.btn {
			flex: 1;
			height: 122rpx;
			line-height: 122rpx;
			text-align: center;
			font-size: 30rpx;
		}
		.btn.b2 {
			background-color: $color-primary;
			.num {
				height: 30rpx;
				line-height: 29rpx;
				margin-left: 9rpx;
				padding: 1rpx 10rpx;
				font-size: 24rpx;
				color: $color-white;
				font-family: $font-family-num;
				background-color: $color-text;
				border-radius: $border-radius-bm;
			}
		}
	}
}

/* 缺省 */
.no_lists {
	margin-top: 460rpx;
	image {
		width: 585rpx;
		height: 308rpx;
	}
}
</style>
